<template>
  <div class="home">

    <HomeItem v-for="item in gameList" :key="item._id" :route="item.route" @click="goGame(item)">
      <div class="home_item_slot flex-between">
        <div style="flex: 1;" class="flex-center"> <el-image :src="item.icon" fit="cover" /></div>
        <div>
          <p class="title">{{ item.name }}</p>
          <p class="desc mle">{{ item.desc }}</p>
        </div>
      </div>
    </HomeItem>
  </div>
  <footer v-if="isInit" className="link_footer"><a href="https://beian.miit.gov.cn/" target="_blank">鄂ICP备2024067443号-1</a></footer>

  <el-dialog v-model="visible" title="微信登录" width="400px" :show-close="false">
    <el-card>
      <div class="wx_qrcode">
        <img :src="wxQrUrl" alt="">
      </div>
    </el-card>
  </el-dialog>
  <!-- <el-card class="exprement_area">
        <template #header>试验区</template>
        <div style="display: flex;flex-wrap: wrap;column-gap: 20px;">

            <el-card style="width: 300px;">
                <template #header>
                    用户登录
                </template>
                <el-form :model="model" label-width="70" label-suffix="：">
                    <el-form-item label="用户名"><el-input v-model="model.username"></el-input></el-form-item>
                    <el-form-item label="密码"><el-input v-model="model.password"></el-input></el-form-item>
                </el-form>
                <template #footer>
                    <el-button type="primary" @click="login">登录</el-button>
                </template>
            </el-card>


            <el-card style="width: 400px;">
                <template #header>
                    个人信息
                </template>
                <el-form ref="formRef" :model="userModel" label-width="90" label-suffix="：">
                    <el-form-item required prop="username" label="用户名"><el-input
                            v-model="userModel.username"></el-input></el-form-item>
                    <el-form-item required prop="gender" label="性别"><el-select v-model="userModel.gender">
                            <el-option :value="item.value" :label="item.label" :key="item.value"
                                v-for="item in genderOptions"></el-option></el-select></el-form-item>
                    <el-form-item required prop="intr" label="简介"><el-input type="textarea"
                            v-model="userModel.intr"></el-input></el-form-item>
                    <el-form-item required prop="avatar" label="头像">
                        <el-upload :limit="1" action="#" :http-request="handleUpload">
                            <img v-if="userModel.avatar" :src="userModel.avatar" />
                            <el-icon class="el-icon--upload" v-else>
                                <Plus />
                            </el-icon>
                        </el-upload>

                    </el-form-item>
                </el-form>
                <template #footer>
                    <el-button type="primary" @click="uploadUserInfo(formRef)">更新</el-button>
                </template>
            </el-card>
        </div>

    </el-card> -->
</template>

<script  lang="ts" setup>
import { allLogin, allUpdateUser } from "@/api/modules/chat";
import HomeItem from "./HomeItem.vue";
import { getGameList } from "@/api/modules/game";
import { FormInstance, UploadRequestOptions } from "element-plus";
import { Plus } from "@element-plus/icons-vue";
import { GlobalStore } from "@/store";
import QRCode from "qrcode";
import { APPID } from "@/config/constant";
import { Game } from "@/api/interface";
const isInit = ref(false)
const input = ref('')
const genderOptions = [
  { label: "男", value: 1 },
  { label: "女", value: 2 },
  { label: "未知", value: 0 },
];
const model = reactive({ username: "admin", password: "123" });
const formRef = ref<FormInstance>();
const visible = ref(false);
const gameList = ref<Game.GameListData[]>([])
const wxQrUrl = ref("");
const globalStore = GlobalStore();
const userModel = ref<any>(JSON.parse(JSON.stringify(globalStore.userInfo)));

const goGame = (item: Game.GameListData) => {
  window.open(location.origin + item.route + "?id=" + item._id, "__blank")
}
const generateWxCode = async () => {
  const loginUrl = `https://open.weixin.qq.com/connect/qrconnect?appid=${APPID}&redirect_uri=${encodeURIComponent(
    location.href
  )}&response_type=code&scope=snsapi_login&state=STATE#wechat_redirect`;
  wxQrUrl.value = await QRCode.toDataURL(loginUrl, { width: 256 });
};
generateWxCode()

getGameList().then(res => {
  gameList.value = res.data;
}).finally(()=>isInit.value=true)
const login = async () => {
  const { data } = await allLogin(model);
  globalStore.userInfo = data;
  userModel.value = data;
  // Object.assign(userModel, data);
  console.log(userModel.value);

  console.log(data);
};
const handleUpload = (option: UploadRequestOptions) => {
  console.log(option);
  userModel.value.avatar = URL.createObjectURL(option.file);
  userModel.value.file = option.file;
};
const uploadUserInfo = (formRef: FormInstance | undefined) => {
  formRef?.validate(() => {
    console.log("更新", userModel.value);
    const formData = new FormData();
    for (const key in userModel.value) {
      const item = userModel.value[key];
      if (typeof item === "object" && !(item instanceof File)) {
        formData.append(key, JSON.stringify(item));
      } else {
        formData.append(key, item);
      }
    }
    allUpdateUser(formData, {
      headers: { "Content-Type": "multipart/form-data" },
    }).then((res) => {
      console.log(res);
    });
  });
};
</script>

<style scoped lang="scss">
.home {
  padding: 20px;
  gap: 20px;
  max-width: 800px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));

  .home_item_slot {
    flex-direction: column;
    height: 100%;

    p {
      margin-top: 5px;
      line-height: 1.4;
      font-size: 14px;
      color: #2440b3;
    }

    .desc {
      color: #666;
      font-size: 12px;
    }
  }

}
.link_footer {
  margin-top: calc(100% + 16px);
  text-align: center;
  padding: 10px;
  width: 100%;
  box-sizing: border-box;
  border-top: 1px solid #eee;

  a {
    text-decoration: none;
    color: #333;
    font-size: 12px;
  }
}

.exprement_area {
  :deep(.el-upload) {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
    width: 100px;
    height: 100px;

    img {
      width: 100%;
    }
  }
}
</style>